<template>
  <div class="page">
    <div class="page-header">
      <img
        class="page-header-flower2"
        src="../assets/imgs/flower2.png"
        alt=""
      >
      <img
        class="page-header-flower3"
        src="../assets/imgs/flower3.png"
        alt=""
      >
      <img
        class="page-header-flower5"
        src="../assets/imgs/flower5.png"
        alt=""
      >
    </div>
  </div>
</template>

<script>
export default {
  name: "h",
  setup(props, cxt) {
    return {};
  },
};
</script>

<style scoped lang='scss'>
.page {
  &-header {
    &-flower2 {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 999;
      width: 220px;
      height: 220px;
      animation: flower2Fly 2s ease-in-out alternate both;
    }
    &-flower3 {
      position: absolute;
      top: 0;
      right: 0;
      width: 65px;
      height: 80px;
      animation: flower3Fly 2s ease-in-out alternate both;
    }
    &-flower5 {
      position: absolute;
      top: 0;
      right: 55px;
      width: 80px;
      height: 80px;
      animation: flower5Fly 2s ease-in-out alternate both;
    }
  }
}
@keyframes flower2Fly {
  0% {
    top: -10%;
    left: 0;
    opacity: 0;
  }
  100% {
    top: 0;
    left: 0;
  }
}
@keyframes flower3Fly {
  0% {
    top: -10%;
    right: 0;
    opacity: 0;
  }
  100% {
    top: 0;
    right: 0;
  }
}
@keyframes flower5Fly {
  0% {
    top: -10%;
    right: 55px;
    opacity: 0;
  }
  100% {
    top: 0;
    right: 55px;
  }
}
</style>